<template>
	<view>
		<!-- <u-navbar :leftIconColor="leftIconColor" title="" :bgColor="'rgba(255, 255, 255, '+pec+')'" autoBack>

		</u-navbar> -->
		<image v-for="(item,index) in imgs" :src="'http://zz.fuliaoxx.com'+item" class="pic" mode="widthFix"
			:key="index"></image>
		<view class="box">
			<view class="u-flex u-flex-y-center u-flex-between">
				<view class="box__name">
					{{info.name}}
				</view>
				<view class="box__btn">
					<view class="" v-if="status==1">
						<view class="kaituan" v-if="rnum==0" @click="openapp">
							立即开团
						</view>
						<view class="kaituan" v-if="rnum>0" @click="openapp">
							立即参团
						</view>
						<!-- <a class="kaituan"
							:href="'myjiaoyu://?activity_id='+theRequest.activity_id+'&price='+info.price"
							v-if="rnum==0">立即开团</a> -->
						<!-- <a class="kaituan"
							:href="'myjiaoyu://?activity_id='+theRequest.activity_id+'&price='+info.price"
							v-if="rnum>0">立即参团</a> -->
					</view>
					<view class="" v-if="status==3">
						<a class="kaituan" style="background:rgba( 255, 93, 49,.4)">已失效</a>
					</view>
					<view class="" v-if="status==2">
						<a class="kaituan" style="background:rgba( 255, 93, 49,.4)">您已参团</a>
					</view>
				</view>
			</view>
			<view class="box__price">
				<text style="font-size: 30rpx;">￥</text> {{info.price}}
			</view>
			<view class="u-flex u-flex-y-center">
				<view class="box__tag tag1">
					正课{{info.number}}节
				</view>
				<view class="box__tag tag2">
					赠课{{info.give}}节
				</view>
			</view>
		</view>
		<u-gap bgColor="#F5F4F4" height="25rpx"></u-gap>
		<view class="xqbox" v-if="rnum==0">
			<view class="xqbox__title">
				<view class="xqbox__title__line">

				</view>
				开团详情
			</view>
			<view class="xqbox__content" v-if="desc">
				{{desc}}
			</view>
		</view>
		<view class="xqbox" v-if="rnum>0">
			<view class="xqbox__title">
				<view class="xqbox__title__line">

				</view>
				开团详情
			</view>
			<view class="xqbox__tips">
				开团成功，还有{{3-rnum}}人即可成团
			</view>
			<view class="u-flex u-flex-xy-center" style="margin-top: 50rpx;">
				<view class="xqbox__tx" v-for="(item,index) in userList" :key="index">
					<image :src="item.avatar?('http://zz.fuliaoxx.com'+item.avatar):'/static/ren.png'"
						class="xqbox__tx__pic" mode=""></image>

					<view class="xqbox__tx__tz" v-if="index==0">
						团长
					</view>
				</view>
			</view>
			<view class="xqbox__tips">
				开团成为团长，成功邀请三人成团可以免单一人.
			</view>
			<view class="xqbox__footer" v-if="theRequest.type=='islj'&&userList==0">
				<u-button color="#3692ff" text="分享好友" shape='circle' size="large"></u-button>
			</view>
		</view>
		<view class="pop" v-if="isWeixin()">
			<image src="/static/pop.png" class="" style="width:50%; margin-left: 45%;" mode="widthFix"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pec: 0,
				leftIconColor: '#fff',
				status: 1,
				userList: [{}, {}, {}],
				theRequest: {},
				info: {},
				imgs: [],
				desc: '',
				rnum: 0,
				status: 0,
				activity_id: ''
			};
		},
		onPageScroll(e) {
			this.pec = e.scrollTop / 44
			if (this.pec >= 1) {
				this.pec = 1
			}
			if (this.pec > 0) {
				this.leftIconColor = '#000'
			} else {
				this.leftIconColor = '#fff'
			}
		},
		onLoad() {
			// this.status=option.status
			var url = window.location.href;
			var theRequest = new Object();
			if (url.indexOf("?") != -1) {
				var str = url.substr(url.indexOf("?") + 1);
				var strs = str.split("&");
				for (var i = 0; i < strs.length; i++) {
					theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1]);
				}
			}
			this.theRequest = theRequest
			// 要判断来源

			this.getinfo()
		},
		methods: {
			isWeixin() {
				var ua = window.navigator.userAgent.toLowerCase();
				if (ua.match(/MicroMessenger/i) == 'micromessenger' || ua.match(/_SQ_/i) == '_sq_') {
					//在微信
					return true;
				} else {
					//在其他浏览器
					return false;
				}
			},
			// 打开app
			openapp() {
				let that=this
				uni.showLoading({
					title:'加载中'
				})
				let hasApp = true,
					t = 5000,
					t1 = Date.now(),
					ifr = document.createElement("iframe");
					
				setTimeout(function() {
					if (!hasApp) {
						// callback && callback()
						// 未安装app，引导安装app
						uni.showToast({
							title:'请安装app',
							icon:'none'
						})
					}
					uni.hideLoading()
					document.body.removeChild(ifr);
				}, 5000);

				ifr.setAttribute('src', 'myjiaoyu://?activity_id=' + this.theRequest.activity_id + '&price=' + this.info
					.price);
				ifr.setAttribute('style', 'display:none');
				document.body.appendChild(ifr);
				// uni.hideLoading()
				setTimeout(function() { //启动app时间较长处理
					let t2 = Date.now();
					if (t2 - t1 < t + 100) {
						hasApp = false;
					}
				}, t);
			},
			getinfo() {
				let that = this
				uni.request({
					url: 'http://zz.fuliaoxx.com/api/classmate/activityInfo',
					method: 'GET',
					data: {
						id: this.theRequest.activity_id
					},
					success(res) {
						if (res.data.code == 1) {
							that.imgs = res.data.data.data.images.split(',')
							that.desc = res.data.data.data.desc
							that.userList.map((t, index) => {
								that.userList[index] = res.data.data.data.userList[index] ? res.data.data
									.data.userList[index] : {}
							})

							that.rnum = res.data.data.data.userList.length
							that.status = res.data.data.data.status
							that.activity_id = res.data.data.data.activity_id
							uni.request({
								url: 'http://zz.fuliaoxx.com/api/subject/subjectInfo',
								method: 'GET',
								data: {
									id: res.data.data.data.subject_id
								},
								success(res1) {
									if (res1.data.code == 1) {
										that.info = res1.data.data

									}
								}
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.pop {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, .7);
		z-index: 999;
	}

	.pic {
		width: 750rpx;
		height: 1000rpx;
		background: #31A4FC;
	}

	.box {
		background-color: #fff;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		padding: 52rpx 35rpx 43rpx 28rpx;
		margin-top: -40rpx;
		position: relative;

		&__name {
			font-size: 30rpx;
			font-family: Alibaba PuHuiTi 2.0;
			font-weight: bold;
			color: #363740;
			line-height: 30rpx;
		}

		&__btn {
			width: 147rpx;

			/deep/.u-button {
				height: 64rpx !important;
			}

			/deep/.u-button--square {
				border-radius: 15rpx !important;
			}
		}

		&__price {
			font-size: 40rpx;
			font-family: Alibaba PuHuiTi 2.0;
			font-weight: bold;
			color: #FF5D31;
			line-height: 30rpx;
			margin-top: 33rpx;
			margin-bottom: 30rpx;
		}

		&__tag {
			padding: 0 14rpx;
			line-height: 40rpx;
			border-radius: 10rpx;
			font-size: 24rpx;
			margin-right: 16rpx;
		}

		.tag1 {
			background-color: rgba(63, 197, 63, .2);
			color: rgba(63, 197, 63, 1);
		}

		.tag2 {
			background-color: rgba(52, 148, 254, .2);
			color: rgba(52, 148, 254, 1);

		}
	}

	.xqbox {
		padding: 46rpx 36rpx;

		&__title {
			display: flex;
			align-items: center;
			font-size: 30rpx;
			font-family: Alibaba PuHuiTi 2.0;
			font-weight: normal;
			color: #333333;
			line-height: 30rpx;
			margin-bottom: 20rpx;

			&__line {
				width: 10rpx;
				height: 27rpx;
				background: #378EFE;
				border-radius: 5rpx;
				margin-right: 7rpx;
			}
		}

		&__content {
			font-size: 26rpx;
			font-family: Alibaba PuHuiTi 2.0;
			font-weight: normal;
			color: #606163;
			line-height: 48rpx;
		}

		&__tips {
			font-size: 26rpx;
			font-family: Alibaba PuHuiTi 2.0;
			font-weight: normal;
			color: #606163;
			line-height: 26rpx;
			text-align: center;
			margin-top: 63rpx;
		}

		&__tx {
			width: 101rpx;
			height: 101rpx;
			position: relative;
			margin-left: 33rpx;

			&__pic {
				width: 101rpx;
				height: 101rpx;
				border-radius: 50%;
			}

			&__tz {
				padding: 0 10rpx;
				height: 30rpx;
				background: #378EFE;
				border-radius: 10rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 19rpx;
				font-family: Alibaba PuHuiTi 2.0;
				font-weight: normal;
				color: #FFFFFF;
				line-height: 19rpx;
				position: absolute;
				top: -17rpx;
				right: -13rpx;
			}
		}

		&__footer {
			padding: 66rpx 0 75rpx;
		}
	}

	.kaituan {
		width: 147rpx;
		height: 64rpx;
		background: #FF5D31;
		border-radius: 15rpx;
		display: inline-block;
		font-size: 26rpx;
		font-family: Alibaba PuHuiTi 2.0;
		font-weight: normal;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
		text-decoration: none;
	}
</style>